<template>
    <div class="flash_master">
        <div class="flash_master_list" v-for="(item, key) in orderList" :key="key">
            <p class="master_msg">
                <span>订单号:{{item.orderNo}}</span>
                <span>{{item.status}}</span>
            </p>
            <div class="order_msg_list">
                <div class="order_img">
                    <img :src="item.masterPhoto | hasdomain" alt="">
                </div>
                <div class="order_msg">
                    <p class="f26">{{item.masterName}}</p>
                    <p class="f26">￥{{item.totalPrice}}</p>
                    <p class="f26">{{item.createtime}}</p>
                </div>
                <div class="clear"></div>
            </div>
            <div class="order_oper">
                <span v-if="item.commentText">拒绝原因：{{item.commentText}}</span>
                <div class="btns">
                    <button v-if="item.status == '待评价'" @click="goutongs(item.consultanceId, item.masterid, item.status)">立即评价</button>
                    <button v-if="item.status != '已取消'" @click="goutong(item.consultanceId, item.masterid, item.status)">查看详情</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'flashMaster',
        data() {
            return {
                orderList: []
            }
        },
        methods: {
            userConsultanceMasterList() {
                let params = {
                    userId: this.$store.state.userId,
                    orderId: this.$route.query.cid,
                    orderNo: this.$route.query.oNo,
                }
                this.$http.fetchGet('userConsultanceMasterList', params).then(res => {
                    if(res.code == 200) {
                        this.orderList = res.data
                    } else {
                        console.log(res.msg)
                    }
                }, err => {
                    console.log(err)
                })
            },
            goutong(cid, mid, sta) {
                this.$router.push({
                    path: '/flashAsked',
                    query: {
                        ding: cid,
                        id: mid,
                        isMaster: this.$store.state.isMaster,
                        status: sta == '待评价' ? '已完成' : sta,
                        sid: this.$route.query.cid
                    }
                })
            },
            goutongs(cid, mid, sta) {
                this.$router.push({
                    path: '/flashAsked',
                    query: {
                        ding: cid,
                        id: mid,
                        isMaster: this.$store.state.isMaster,
                        status: sta,
                        sid: this.$route.query.cid
                    }
                })
            },
        },
        mounted() {
            this.userConsultanceMasterList()
        }
    }
</script>

<style lang="less" scoped>
    .flash_master{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: #f2f2f2;
        .flash_master_list{
            width: 100%;
            background: #fff;
            .mb(20);
            .master_msg{
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #f2f2f2;
                .lh(88);
                .padd(0, 20);
            }
            .order_msg_list{
                .padd(20, 20);
                .order_img{
                    .w(160);
                    .h(160);
                    float: left;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
                .order_msg{
                    float: left;
                    .ml(20);
                    p{
                        .lh(50);
                    }
                }
                .clear{
                    clear: both;
                }
            }
            .order_oper{
                position: relative;
                .h(88);
                .lh(88);
                .padd(0, 20);
                border-top: 1px solid #f2f2f2;
                .btns{
                    position: absolute;
                    right: 0;
                    top: 0;
                    button{
                        .h(55);
                        .mr(20);
                        border: none;
                        background: #fff;
                        border-radius: 5px;
                        color: #189BEB;
                        border: 1px solid #189BEB;
                    }
                }
            }
        }
    }
</style>
